<template>
  <!-- {{ multipleSelection }} -->
  <h1> 商品编号 11000-12999</h1>
  <el-button type="success" @click="addBtnFun">
    <el-icon>
      <Plus />
    </el-icon>
    添加</el-button>
  <el-button @click="bigdel" type="danger">
    <el-icon><Delete /></el-icon>
    批量删除</el-button>
  <el-table ref="multipleTableRef" :data="listone" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="商品名称" width="120">
      <template #default="scope">{{ scope.row.configName }}</template>
    </el-table-column>
    <el-table-column property="redirectUrl" label="跳转链接" width="120" />
    <el-table-column property="configRank" label="排序值" />
    <el-table-column property="goodsId" label="商品编号" />
    <el-table-column property="createTime" label="添加时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <!-- {{ scope.row.redirectUrl }} -->
        <el-button size="small" type="primary" @click="handlePut(scope.$index, scope.row)">
          修改
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>






  <!-- 弹框 -->
  <el-dialog v-model="dialogFormVisible" :title=title width="500" @closed="closed">
    <!-- 文件 -->
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
      class="demo-ruleForm" status-icon>


      <el-form-item label="商品名称" prop="configName">
        <el-input v-model="ruleForm.configName" />
      </el-form-item>

      <el-form-item label="跳转链接" prop="redirectUrl">
        <el-input v-model="ruleForm.redirectUrl" />
      </el-form-item>
      <el-form-item label="商品编号" prop="goodsId">
        <el-input v-model="ruleForm.goodsId" />
      </el-form-item>

      <el-form-item label="排序值" prop="configRank">
        <el-input v-model="ruleForm.configRank" />
      </el-form-item>




      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="dialogFormVisible = false;">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>



  <!-- 分页 -->

  <el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total" />


</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { ElTable } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'

import axios from '../../ajax';
let dialogFormVisible = ref(false)
let title = ref('添加')
let carouselId = "";//id

const multipleTableRef = ref()

const multipleSelection = ref([])
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
//拿数据
onMounted(() => {
  getdata(1)
})
let listone = ref([])
let total = ref(0)

let getdata = async (pageNumber) => {
  let { list, totalCount } = await axios.get('/indexConfigs', {
    params: {
      pageNumber,
      pageSize: 10,
      configType: 4
    }
  })
  listone.value = list
  // console.log(list);
  total.value = totalCount

}


//删除
let handleDelete = (i, row) => {
  console.log(row);
  listone.value.splice(i, 1)
  getid([row.configId])
}
let getid = async (ids) => {//拿到id
  let res = await axios.delete('/indexConfigs/delete', {
    data: {
      ids
    }

  })
}
//批量删除

let bigdel = () => {//删除

  if (multipleSelection.value.length == 0) {
    // alert("未选择")
    ElMessage.error('未选择!')
  }

  let arry = []
  multipleSelection.value.map(item => arry.push(item.carouselId))

  multipleSelection.value.map(item => {
    listone.value.map((items, index) => {
      if (item.carouselId == items.carouselId) {
        console.log(index);
        listone.value.splice(index, 1)
      }
    })
  })


  getid(arry)
}



let addBtnFun = () => {//添加
  title.value = "添加"
  dialogFormVisible.value = true
  carouselId = '';
  ruleForm.configName = ""
  ruleForm.redirectUrl = ''
  ruleForm.goodsId = ""
  ruleForm.createTime = ""
  ruleForm.configRank = ""

};
const ruleFormRef = ref()

const ruleForm = reactive({
  configName: "",
  redirectUrl: '',
  goodsId: "",
  configType: 4,
  configRank: ""
})
const rules = reactive({  // 表单验证
  configName: [
    { required: true, message: '名字', trigger: 'blur' },
  ],
  redirectUrl: [
    { required: true, message: '链接', trigger: 'blur' },
  ],
  goodsId: [
    { required: true, message: 'id不能为空', trigger: 'blur' },
  ],
  configRank: [
    { required: true, message: '排序不能为空', trigger: 'blur' },
  ],
})
//弹框
const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  console.log(response);
  ruleForm.configName = response.data
}


//确定
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {//验证通过----ajax
      console.log('submit!')
      if (title.value == '添加') {
        submitfun()
      } else {
        submitfunput()
      }


    } else { // 验证失败
      console.log('error submit!', fields)
    }
  })
}

let submitfun = async () => {//添加
  let res = await axios.post('/indexConfigs', {
    configName: ruleForm.configName,
    configRank: ruleForm.configRank,
    configType: ruleForm.configType,
    goodsId: ruleForm.goodsId,
    redirectUrl: ruleForm.redirectUrl,
  })
  dialogFormVisible.value = false
  getdata(1);
}
let submitfunput = async () => {//修改
  let res = await axios.put('/indexConfigs', {
    configName: ruleForm.configName,
    configRank: ruleForm.configRank,
    configType: ruleForm.configType,
    goodsId: ruleForm.goodsId,
    redirectUrl: ruleForm.redirectUrl,
    configId: carouselId

  })
  dialogFormVisible.value = false
  getdata(1);
}
//修改
let handlePut = (index, row) => {
  title.value = '修改'
  console.log(row);
  dialogFormVisible.value = true
  carouselId = row.configId,
    ruleForm.configName = row.configName,
    ruleForm.configRank = row.configRank,
    ruleForm.configType = row.configType,
    ruleForm.goodsId = row.goodsId,
    ruleForm.redirectUrl = row.redirectUrl

}

let currentChange = (page) => {
  console.log(page);
  getdata(page)
}

let closed = () => {

}
</script>

<style lang="scss" scoped>
.el-pagination {
  justify-content: center;
}
</style>